import React, { useRef } from 'react'
import style from './style.module.scss'
import { LeftOutlined, RightOutlined } from '@ant-design/icons'
import { Carousel } from 'antd'
import BannerImage from '../../../assets/images/ic_resource_banner_01.jpg'
import LeoButton from '../../../widgets/LeoButton'

export default function Banner() {
    const banner = useRef<typeof Carousel>(null)

    const handleBannerSlide = (form: number, to: number) => {
        // TODO: 此处写Banner切换改变底下Banner说明的逻辑
        console.log(to)
    }

    return (
        <div className={style.banner}>
            <Carousel dotPosition="top" ref={banner as any} beforeChange={handleBannerSlide}>
                <div key="banner1">
                    <div
                        className={style.banner__image}
                        style={{
                            backgroundImage: `url(${BannerImage})`
                        }}
                    />
                </div>
            </Carousel>
            <div className={style.banner__wrap}>
                <div className={style.banner__anno}>
                    <h1>GAME ON 系列 趣味来袭</h1>
                    <p>路易威登女装艺术总监 Nicolas Ghesquière 推出 2021 早春系列，由品牌大使 Léa Seydoux 倾情演绎。</p>
                    <LeoButton title="即刻选购" to="/series/M57843" />
                </div>
            </div>
            <span className={`btn ${style.banner__btn__forward}`} onClick={() => (banner.current as any)?.prev()}>
                <LeftOutlined />
            </span>
            <span className={`btn ${style.banner__btn__next}`} onClick={() => (banner.current as any)?.next()}>
                <RightOutlined />
            </span>
        </div>
    )
}
